<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>同城活动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
    <style>
        body{
            font-family: "Microsoft YaHei", sans-serif;
            min-height:100vh;
            background: #fff;
        }
        .header{
            background: #43ac45;
        }
        .header h1{
            color:#fff;
            font-size:18px;
        }
        .header a{
            color:#fff;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .clear{
            clear: both;
            display:table;
        }
        ul li{
            list-style-type: none;
        }
        .section{
            margin-top:44px;
        }
        .intro .view{
            width:100%;
            position: relative;
        }
        .view img{
            width:100%;
            height:32vh;
        }
        .view p{
            margin:0;
            width:100%;
            color:#fff;
            height:35px;
            line-height:35px;
            font-size:15px;
            padding-left:12px;
            background:rgba(0,0,0,0.5);
            position: absolute;
            bottom:4px;
            left:0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:1;
            overflow: hidden;
        }
        .viewIntro{
        	width:100%;
        	height:100%;
        	border-bottom:5px solid #f2f2f2;
        }
        .viewIntro span{
        	display: inline-block;
            width:100%;
            height:15px;
            padding:5px 12px 20px;
            background: url("../../images/city_life/trg1.png") no-repeat center 70%;
            background-size: 3%;
            /*border-bottom:5px solid #f2f2f2;*/
        }
        .viewIntro >p{
        	padding:5px 12px 0;
            font-size:12px;
            line-height:1.5;
            margin-bottom:0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;
            overflow: hidden;
        }
        /*点击弹出框*/
       .active{

       }
        .apply{
            width:100%;
            padding:0;
        }
        .apply ul{
            width:100%;
            margin:0;
            padding:5px 12px 0 12px;
        }
        .apply ul li{
            width:100%;
            padding:3px 0 3px 0;
        }
        .apply ul li>p{
            display: inline-block;
            margin:0;
            padding:0;
            color:#333;
            line-height:1.5;
            height:25px;
       
        }
        .apply ul li>p:first-child{
            width:25%;
            vertical-align: top;
        }
        .apply ul li>p:last-child{
            width:70%;
        }
        ul li .address:after{
            content: '';
            display: inline-block;
            width: 16px;
            height: 100%;
            vertical-align: -webkit-baseline-middle;
            background: url(../../images/icon/executive_housekeeper/dingw.png) no-repeat 3px 2px;
            background-size: 89%;
        }
        ul li .tell:after{
            content: '';
            display: inline-block;
            width: 16px;
            height: 100%;
            vertical-align: -webkit-baseline-middle;
            background: url(../../images/icon/executive_housekeeper/ip.png) no-repeat 3px 2px;
            background-size: 89%;
        }
        button{
            width:94%;
            
            height:40px;
            font-size:15px;
            margin:15px 3%;
            
            border:none;
        }
        .apply>p{
            background:#f2f2f2;
            height:30px;
            padding:0 12px;
            line-height:30px;

        }
        .review li img{
            width: 30px;
            height:30px;
            float: left;
            border-radius: 50%;
        }
        .review{
        	margin:0 0 40px 0;
        	padding:0;
        }
        .review li div{
            width:100%;
        }
        .review li div span{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            margin-left: 10px;
            color: #999;
            font-size:12px;
        }
        .review li p{
            font-size:13px;
            color:#333;
            margin-left:40px;
            word-wrap: break-word;
        }
        .review li{
            border-bottom:1px solid #f2f2f2;
            padding:5px 15px 0 15px;
            list-style-type: none;
            margin-bottom:0px;
        }
        .foot{
            position: fixed;
            z-index: 10;
            right: 0;
            left: 0;
            bottom:0px;
            height: 44px;
            padding-right: 10px;
            padding-left: 10px;
            border-top:1px solid #f2f2f2;
            background: #fff;
        }
        .foot>div{
            background:#fff;
            box-shadow: 0 1px 6px #fff;
            border-bottom: 1px solid #f2f2f2;
        }
        .foot input{
            border: none;
            background: #f2f2f2;
            width: 75%;
            height: 33px;
            line-height:33px;
            font-size:13px;
            margin-top: 5px;
            margin-left: 10%;
            border-radius: 8px;
        }
        .foot div span{
            padding-left:2%;
            color:#999;
            font-size:14px;
        }
        
        
        /*btn样式*/
       .end_apply{
       		background: #d8d8d8;
       		color:#999;
       }
       .start_apply{
        	color:#fff;
        	background:#43ac45;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav header">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">同城活动</h1>
</header>
<div class="section">
    <!--景点简介-->
    <!--<div class="intro">
        <div class="view">
            <img src="../../images/ce1.jpg" alt="">
            <p>五一相约深山沟农场</p>
        </div>
        <div class="viewIntro">
            <p>
                横涧镇，是一位和蔼的农民伯伯，利用家乡的山区土地慌着没人耕种，就把土地承包过来中上果树，变成了现在美丽的深山沟农场，春天的时候甚是好看,吸引大批游客前来观光
            </p>
            <span class='noactive'></span>
        </div>
    </div>
    <div class="apply">
        <ul>
            <li>
                <p>活动类型：</p>
                <p>亲子</p>
            </li>
            <li>
                <p>活动人数：</p>
                <p>50/100人</p>
            </li>
            <li>
                <p>组织者&nbsp;&nbsp;&nbsp;：</p>
                <p>深山沟家庭农场</p>
            </li>
            <li>
                <p>预计费用：</p>
                <p>成人150元，1.4以下儿童75元</p>
            </li>
            <li>
                <p>活动时间：</p>
                <p>2016年05月01日 08:30</p>
            </li>
            <li>
                <p>结束时间：</p>
                <p>2016年05月06日 15:30</p>
            </li>
            <li>
                <p>联系电话：</p>
                <p class="tell">0519-87932586</p>
            </li>
            <li>
                <p>活动地点：</p>
                <p class="address">常州市河东戴埠镇横涧南渚上曹村</p>
            </li>
        </ul>
        <button class="btn">活动报名</button>
        <!--<p>共10条评论</p>-->
    <!--</div>-->
    <!--<ul class="review">-->
		<!--<li>-->
			<!--<div class="clear">-->
				<!--<img src="../../images/ce2.jpg" alt="" />-->
				<!--<span class="left">时间</span>-->
				<!--<span class="right">2017-3-22</span>-->
			<!--</div>-->
			<!--<p>我去过，感觉风景很美</p>-->
		<!--</li>-->
    <!--</ul>-->
</div>
    <!--<foot class="foot">-->
        <!--<div style="margin:0">-->
            <!--<div class="list-block">-->
                <!--<div style="height:50px;position:relative">-->
                    <!--<img src="../../images/icon/news_list/star.png" style="width:24px;position:absolute;top:7px;" id='setCollect' class="collection noStar">-->
                    <!--<img src="../../images/icon/news_list/start1.png" style="width:24px;position:absolute;top:7px;" id='cancelCollect' class="collection noStar">-->

                    <!--<input id="input" type="text" maxlength="140" placeholder="说说你的感想！140字之内">-->
                    <!--<span id="send">发送</span>-->
                <!--</div>-->
            <!--</div>-->
            <!--<p style='color:red;font-size:12px;text-align:center;margin-top: -11px;'>评论内容为140字以内！ </p>-->
        <!--</div>-->
    <!--</foot>-->
<script src="../../plugins/mui/mui.min.js"></script>
<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
<script src="../../js/getApiToken.js"></script>
<script src="../../js/md5.js"></script>
<script>
    var pathImg;//图片
    var dataName;//名称
    mui.init();
    mui.plusReady(function(){
        var tag_id=plus.webview.currentWebview().id;
        var uid=plus.storage.getItem('cg_user_id');
        console.log(tag_id);
        console.log('//');
        //列表获取ajax
          myAjax('home/Activity/getActivity/','get',
              {
              	id:tag_id,
              	uid:uid
              },
            function(data) {
                if (data.success) {
                console.log(JSON.stringify(data));
                console.log(data.is_enroll);
                if (data.is_end == 0) {
                    var btn_html = '活动报名';
                    //判断是否已经报名
                    if (data.is_enroll == 1) {
                        var btn_html = '已报名'
                    } else {
                        var btn_html = '活动报名';
                    }
                } else if (data.is_end == 1) {
                    var btn_html = '活动结束';
                } else if (data.is_end == 2) {
                    var btn_html = '人数已满';
                }
                var html = '<div class="intro">' +
                        '<div class="view">' +
                        '<img src="' + _baseUrl + data.path + '" alt="">' +
                        '<p>' + data.name + '</p>' +
//'<p>' + '世界是和上帝丰厚的卡i换肤热i和德国和地热和我困扰过hi荣读后感' + '</p>' +
                        '</div>' +
                        '<div class="viewIntro">' +
                        '<p>' +
                        data.content +
                        '</p>' +
                        '<span class="noactive"></span>' +
                        '</div>' +
                        '</div>' +
                        '<div class="apply">' +

                        '<ul>' +
                        '<li>' +
                        '<p>活动类型：</p>' +
                        '<p>' + data.tag_name + '</p>' +
                        '</li>' +
                        '<li>' +
                        '<p>活动人数：</p>' +
                        '<p>' + data.enroll_number + '/' + data.number + '人' + '</p>' +
                        '</li>' +
                        '<li>' +
                        '<p>组织者&nbsp;&nbsp;&nbsp;：</p>' +
                        '<p>' + data.sponsor + '</p>' +
                        '</li>' +
                        '<li>' +
                        '<p>预计费用：</p>' +
                        '<p>' + data.cost + '</p>' +
                        '</li>' +
                        '<li>' +
                        '<p>活动时间：</p>' +
                        '<p>' + data.start_time + '</p>' +
                        '</li>' +
                        '<li>' +
                        '<p>结束时间：</p>' +
                        '<p>' + data.end_time + '</p>' +
                        '</li>' +
                        '<li>' +
                        '<p>联系电话：</p>' +
                        '<p class="tell" id="tel">' + data.telephone + '</p>' +
                        '</li>' +
                        '<li>' +
                        '<p>活动地点：</p>' +
                        '<p class="address" id="address">' + data.address + '</p>' +
                        '</li>' +
                        '</ul>' +
                        '<button id="' + tag_id + '" class="start_apply">' + btn_html + '</button>' +
                        '</div>'
                    dataName=data.name;
                    pathImg=_baseUrl+data.path;
                $('.section').html(html);
                //btn的颜色状态判断
                console.log();
                if ($('button').html() != '活动报名') {
                    $('button').addClass('end_apply').removeClass('start_apply');
                } else {
                    $('button').addClass('start_apply').removeClass('end_apply');
                }


                //报名条件：
              if(data.is_end==0 && data.is_enroll==0){        
                    //点击去报名
                    mui('.section').on('tap', ' .apply button', function (e) {
                        console.log('跳转下一页：报名信息填写')
                        var this_id = $(this).attr('id');
                        //获取页面的id

                        console.log(this_id);
                        console.log('id是多少')
                        mui.openWindow({
                            url: 'apply_index.html',
                            extras: {
                                'this_id': this_id,
                                'path':pathImg,
                                'name':dataName
                            },
                            waiting: {
                                autoShow: true,//自动显示等待框，默认为true
                                title: '正在加载...',//等待对话框上显示的提示内容
                            },
                            show: {
                                autoShow: true,
                                aniShow: 'fade-in'
                            },
                        })
                    })
                }
            }
		      //结束ajax  
 			 }
          )
		//查看景区详情简介
        mui('.section').on('tap','.intro .viewIntro span',function(e){
        	console.log('/////')
        	if($('.viewIntro span').attr('class')=='active'){
            	$('.viewIntro>p').css({
	            	' display':'-webkit-box',
	           		'-webkit-line-clamp':'2'
            	});
        		$('.viewIntro span').removeClass('active').addClass('noactive');
        	}else{
            	$('.viewIntro>p').css({
	            	' display':'block',
	           		'-webkit-line-clamp':'100'
            	});
           		 $('.viewIntro span').removeClass('noactive').addClass('active');
        	}
        })
        //点击去报名
//      mui('.section').on('tap',' .apply #btn',function(){
//          mui.openWindow({
//              url:'apply_index.html',
//              id:'apply_index',
//              waiting:{
//				    autoShow:true,//自动显示等待框，默认为true
//				   	title:'正在加载...',//等待对话框上显示的提示内容
//    			},
//    			show:{
//    				autoShow:true,
//    				aniShow:'fade-in'
//    			},
//    			extras:{
//    				type:0
//    			}
//          })
//      })
        //地址map地图
        $('body').delegate('#address', 'touchstart', function(e) {
			var address = $('.address').text();
			mui.openWindow({
				url:'../executive_housekeeper/map.html',
				extras:{
					'address':address
				},
				waiting:{
					autoShow:true,//自动显示等待框，默认为true
	  				title:'正在加载...',//等待对话框上显示的提示内容
				}
			})
			e.preventDefault();
		});
        
        
        
        
        $('body').delegate('#tel', 'tap', function(e) {
			var telephone = $('.tell').text();
			mui.confirm(telephone, '提示', ['取消', '拨打'], function(value) {
				if(value.index == 1) {
					var Uri = plus.android.importClass("android.net.Uri");
					var Intent = plus.android.importClass("android.content.Intent");
					var number = new Uri.parse("tel:"+telephone);
					var callIntent = new Intent(Intent.ACTION_CALL, number); 
					plus.android.runtimeMainActivity().startActivity(callIntent);
				}
			});
			e.preventDefault();
		});
        
        
        //拨打电话
        
    })
</script>
</body>
</html>
